<template>
	<!-- 主页导航菜单 -->
	<div class="index">
		<router-view></router-view>
		<div class="index_bottom">
			<van-tabbar
			v-model="active"
			active-color="red"
			inactive-color="#000"
			>
			<van-tabbar-item name='1' icon="shop-o">主页</van-tabbar-item>
			<van-tabbar-item name='2' icon="like-o">关注</van-tabbar-item>
			<van-tabbar-item name='3' to='/Shopping' icon="shopping-cart-o">购物车</van-tabbar-item>
			<van-tabbar-item name='4' to='/personal' icon="friends-o">我的</van-tabbar-item>
			</van-tabbar>
		</div>
	</div>
</template>
<script>
import {Tabbar, TabbarItem ,Icon } from 'vant'
export default {
	components:{
		[Tabbar.name]:Tabbar,
		[TabbarItem.name]:TabbarItem,
		[Icon.name]:Icon,
	},
	name: 'index',
	data () {
		return {
			active:'4'
		}
	},
	mounted(){
		
	},
	methods:{
		
	},
	created() {
		
	},
	beforeDestroy() {
		
	}
}		
</script>
<style scoped>
.index{position: relative;}
.index_bottom{width: 100%;height:50px;position: absolute;bottom: 0;border-top: 1px solid #e6e4e4;}
.index>div:nth-of-type(1){position: absolute;top:0;bottom: 51px;left: 0;right: 0;background: #f8f8f8;}
/* .index>div:nth-of-type(1){width: 100%;height: auto;background: red;padding: 10px;} */



</style>
